<template>
  <div>
    <header>
      <n-bar></n-bar>
    </header>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="add"
      @edit="edit"
      @select="select"
    />
  </div>
</template>

<script>
import { addresslist } from "../requset/app";
import qsString from "querystring";
export default {
  data() {
    return {
      chosenAddressId: "1",
      list: [],
    };
  },
  mounted() {
    addresslist({ uid: this.$store.getters.getUserInfo.uid }).then((res) => {
      if (res.code == 200) {
        console.log(res, "响应");
        if ((res.code = 200)) {
          this.list = res.list.map((item) => {
            return {
              id: item.id,
              name: item.username,
              tel: item.userphone,
              address: item.location,
              areaCode: item.regioncode,
              addressDetail: item.useraddress,
              isDefault: item.status ? true : false,
              radio: item.label,
            };
          });
        }
      }
    });
  },
  methods: {
    add() {
      this.$router.push("/newaddress");
    },
    edit(e) {
      // console.log(e, "eeeeeeeeeee");
      this.$router.push("/newaddress?" + qsString.stringify(e));
    },
    select(e) {
      console.log(e, "选择");
      this.$router.push("/order?id=" + e.id);
    },
  },
};
</script>

<style scoped>
/* 头部 */
header {
  background-color: #ff6040;
  box-sizing: border-box;
}

/* 顶部信息 */
header .top_box {
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.06rem 0 0.17rem;
  box-sizing: border-box;
}

header .top_box > a span {
  font-size: 0.17rem;
  color: #ffffff;
}

header .top_box h2 {
  opacity: 0.8;
  font-size: 0.17rem;
  color: #ffffff;
  margin-left: 0.23rem;
}

header .top_box .more {
  width: 0.87rem;
  height: 0.32rem;
  background: rgba(255, 119, 51, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.405rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header .top_box .more .line {
  width: 1px;
  height: 0.19rem;
  background: rgba(255, 255, 255, 0.25);
}

header .top_box .more a span {
  font-size: 0.19rem;
  opacity: 0.8;
  color: #ffffff;
}

.address {
  width: 100%;
  margin-top: 0.2rem;
}
.address ul li {
  margin-left: 0.1rem;
}
.address ul li > span {
  padding: 0.03rem 0.06rem;
  background-color: red;
  color: #fff;
  border-radius: 50%;
}
.address ul li h3 {
  margin-top: 0.05rem;
}
.address ul li h3 > span {
  font-size: 0.16rem;
  font-weight: bolder;
}
.address ul li h3 > span:nth-child(1) {
  margin-right: 0.3rem;
}
.address ul li h3 > span:nth-child(2) {
  margin-right: 0.3rem;
}
.address ul li h3 > span:nth-child(3) {
  color: #fff;
  background-color: red;
  font-weight: normal;
  padding: 0.02rem;
}
.address ul li > p {
  margin-top: 0.12rem;
  font-size: 0.16rem;
  color: #a4a4a4;
}
.address ul li > p i {
  float: right;
  font-size: 0.25rem;
  margin: -0.07rem 0.2rem 0 0;
  color: #a4a4a4;
}

.foot {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  background-color: #fff;
  position: fixed;
  bottom: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
}
.foot span {
  font-size: 0.18rem;
  background-color: red;
  padding: 0.17rem 0.9rem;
  border-radius: 0.33rem;
  color: #fff;
}
</style>
